<template>
  <div class="detail-nav-bar">
    <nav-bar>

      <div 
        slot="left" 
        class="back"
        @click="backHome">
        <img src="~assets/img/common/back.svg" alt="">
      </div>

      <div slot="center" class="title-box">
        <div 
          v-for="(item, index) in title" 
          :key="index" 
          class="item"
          @click="itemClick(index)"
          :class="{ active: currentItem === index }">
          {{item}}
        </div>
      </div>

    </nav-bar>
  </div>
</template>

<script>

  import NavBar from "@/components/common/NavBar.vue"

  export default {

    data() {
      return {
        title: ["商品", "参数", "评论", "推荐"],
        currentItem: 0,
      }
    },

    components: {
      NavBar,
    },

    methods: {
      itemClick(index) {
        if(this.currentItem !== index)
          this.currentItem = index;
      },

      backHome() {
        this.$router.back();
      }
    }

  }
</script>

<style scoped>
  .nav-bar {
    background-color: #fff;
  }
  .back img {
    width: 45%;
    height: 45%;
    vertical-align: middle;
  }
  .title-box {
    display: flex;
  }
  .title-box .item {
    color: #666;
    flex: 1;
    font-size: 18px;
  }
  .item.active {
    color: #ff5777;
  }
</style>